<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row :gutter="20">
                <el-col :span="13"><el-input v-model="input" style="width:100%" placeholder="输入要查看的门店" /></el-col>
                <el-col :span="4"><el-button @click="sousuo(input)">搜索</el-button></el-col>
                <el-col :span="7"><el-button @click="tianjia">添加关联门店</el-button></el-col>
            </el-row>
        </el-col>
        <el-col :span="24" class="col">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" :index="indexMethod" prop="date" label="序号" align="center" width="125"
                    label-class-name="header" />
                <el-table-column prop="shopName" label="名称" header-align="center" width="125"
                    label-class-name="header" />
                <el-table-column prop="shopId" label="ID" header-align="center" width="125" label-class-name="header" />
                <el-table-column prop="shopSort" label="排序" header-align="center" width="125"
                    label-class-name="header" />
                <el-table-column prop="shopAddress" label="地址" header-align="center" width="125"
                    label-class-name="header" />
                <el-table-column prop="salesVolume" label="订单数量" header-align="center" width="125"
                    label-class-name="header" />
                <el-table-column prop="name" label="操作" header-align="center" width="125" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-dialog v-model="shan" :title="title" width="380" destroy-on-close="true">
        <ShanChu v-if="title == '删除'" @operate="guanbi" :communityId="id" :caozhuo="ck" />
    </el-dialog>
    <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
        <TianJia v-if="title == '添加关联门店'" @operate="guanbi" :communityId="id"></TianJia>
    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex';
import ShanChu from './ShanChu.vue';
import TianJia from './TianJia.vue';
const store = useStore();
const input = ref('')
const tableData = ref();
let shan = ref(false);
let title = ref("");
let id = ref("");
let ck = ref("");
let show = ref(false);
// let xiaoqu = ref();

onMounted(async function () {
    let res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresList?pageNum=1&pageSize=10&shopName=&communityId=" + store.state.ID);
    console.log(res);
    tableData.value = res.data.data.list;
})
const indexMethod = (index) => {
    return index + 1
}
const sousuo = async function(input){
    let res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresList?pageNum=1&pageSize=10&shopName=${input}&communityId=${store.state.ID}`);
    tableData.value = res.data.data.list;
}

const del = function (item) {
    id.value = {
        panghuCommunityId: store.state.ID,
        panghuShopId: item.shopId
    };
    ck.value = "删除商品"
    shan.value = true;
    title.value = "删除";
}
const guanbi = function () {
    shan.value = false;
    show.value = false;
}

const tianjia = function () {
    show.value = true;
    title.value = "添加关联门店";
    // xiaoqu.value = data.row;
    id.value = store.state.ID;
}
</script>
<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>